<template>
    <view class="content">
        <scroll-view scroll-x class="pekTabs">
            <view v-for="item in activeList" :key="item.key" class="pekTab"
                :class="{ pekTabActive: item.key == type, pekTabOne: activeList.length == 1, pekTabTwo: activeList.length == 2, pekTabMore: activeList.length >= 3 }"
                @click="type = item.key">
                <text>{{ item.title }}</text>
            </view>
        </scroll-view>
        <view class="cardBody" v-if="pekProducts.length > 0">
            <view v-for="(item, index) in pekProducts" class="productInfo" :key="item.id" @click="goProduct(item.id)">
                <view class="infoHeader">
                    <image :src="item.url" class="infoImage" />
                </view>
                <view class="infoBody">
                    <view class="infoTitle">
                        {{ item.title }}
                    </view>
                    <view class="infoType">
                        {{ item.form }}
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="noMore">
            <view>暂无更多产品</view>
        </view>
        <callWe></callWe>
    </view>
</template>

<script>
import { get, post } from '../../../static/js/request'
export default {
    data() {
        return {
            pekProducts: [],
            activeList: [{
                key: 1,
                title: '直线导轨'
            },
            {
                key: 2,
                title: '其他'
            }],
            size: 10,
            type: 1,
        }
    },
    created() {
        this.inCreate()
    },
    watch: {
        type: {
            handler(newV, oldV) {
                this.getProducts()
            }
        }
    },
    methods: {
        inCreate() {
            this.getProducts()
            this.getTypes()
        },
        getTypes() {
            get('type/list').then(res => {
                this.activeList = [];
                for (const key in res.result) {
                    this.activeList.push({
                        key: res.result[key].id,
                        title: res.result[key].name
                    })
                }
            })
        },
        getProducts() {
            post(`product/list?size=${this.size}`, {
                type: this.type
            }).then(res => {
                this.pekProducts = res.result
            })
        },
        goProduct(id) {
            uni.navigateTo({
                url: "/pages/product/product?productId=" + id
            })
        }
    }
}
</script>

<style>
* {
    font-family: 微软雅黑, "Microsoft YaHei", SimHei, FangSong, Arial, Helvetica, sans-serif !important;
}

/* #region Tabs样式 */
.pekTabs {
    width: 100%;
    white-space: nowrap;
}

.pekTab {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    padding: 12rpx 0;
    color: white;
    font-weight: lighter;
    font-size: 30rpx;
    border-bottom: 1px solid rgb(179, 6, 17);
}


.pekTabActive {
    color: white;
}

.pekTabActive text {
    font-weight: light;
    padding: 11rpx 4rpx;
    font-size: 32rpx;
    border-bottom: 2px solid white;
}

.pekTabOne {
    width: 100%;
}

.pekTabTwo {
    width: 49%;
}

.pekTabMore {
    width: 33.3%;
}

/* #endregion */


.cardBody {
    display: flex;
    width: 92%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
}

.productInfo {
    margin-top: 20rpx;
    flex: 0 0 44%;
    /* border: 4rpx solid #b30611; */
    padding: 16rpx;
    border-radius: 10rpx;
    border: 1px solid #e6e0e0;
    background: #f7f4f4;
}

.infoHeader {
    height: 300rpx;
    width: 100%;
}

.infoImage {
    background-image: url(http://www.peklm.cn/images/bg/content-1/bg-content-1-list.png);
    background-size: cover;
    height: 100%;
    width: 100%;
}

.infoTitle {
    font-weight: bold;
    margin-top: 14rpx;
    font-size: 32rpx;
}

.infoType {
    font-weight: lighter;
    font-size: 28rpx;
    margin: 5rpx 0;
}

.noMore {
    font-size: 28rpx;
    background: rgb(179, 6, 17, .3);
    border: 1px solid rgb(179, 6, 17);
    color: white;
    border-radius: 30rpx;
    width: max-content;
    padding: 14rpx 30rpx;
    margin: 20rpx auto;
}
</style>